<template>
    <div >
        <div>
            <div style="height:40px">
                <Button type="success" @click="commentModal = true" style="float:right;color:#fff;">{{ $t('langObj.comment') }}</Button>
            </div>
            <br style="clear:both"/>
            <comment-list @addCurrentLike="addLike" @delCurrentComment="delCom" v-for="(item,index) in commentListArr" :key="index" :item="item"></comment-list>
        </div>
        
        <Modal
        v-model="commentModal"
        :title="$t('langObj.comment')"
        width="360"
        :mask-closable="false">
        <Input type="textarea" placeholder="在此输入文字" :rows="5" v-model="content"/>
        <div slot="footer">
                <Button type="success" @click="submitCourseComment">{{ $t('langObj.submit') }}</Button>
            </div>  
        </Modal>
    </div>    
</template>

<script>
import commentList from '@/components/education/lists/commentList'
import { mapActions } from 'vuex';
export default {
    components:{commentList},
    data(){
        return{
            commentModal:false,
            content:"",
            commentListArr:[],
        }
    },
    methods:{
        ...mapActions(['XgetCommentList','XcreateComment','Xpraise','XdelComment']),
        submitCourseComment(){
            this.XcreateComment({
                content:this.content,
                objId:this.$route.params.id,
                objType:"COURSE"
            }).then(res => {
                this.$Message.success("评论成功");
                this.commentModal = false;
                this.mountCommentList();
            }).catch(err => {
                this.$Message.error(err.response.data.message)
            })
        },
        addLike(type){
            this.Xpraise(type.comment_id).then(res => {
                if(type.voted){
                    this.$Message.success("已取消赞");
                }else{
                    this.$Message.success("点赞成功");
                }
                this.mountCommentList()
            })
        },
        delCom(comment_id){
            this.XdelComment(comment_id).then(res => {
                this.$Message.success("删除成功");
                this.mountCommentList()
            }).catch(err => {
                this.$Message.error(err.response.data.message);
            })
        },
        mountCommentList(){
            this.XgetCommentList({
                objId:this.$route.params.id,
                objType:"COURSE"
            }).then(res => {
                this.commentListArr = res.data
            })
        }
    },
    mounted(){
        this.mountCommentList()
    }
}
</script>

<style lang="scss" scoped>

</style>
